<template>
  <div>
    <input
      type="text"
      v-model="todoValue"
      @keyup="setTodoValue"
    />
  </div>
</template>

<script lang="ts">
// import { defineComponent } from "@vue/runtime-core";
import { defineComponent, ref } from "vue";
import { IUseTodo, useTodo } from '../../hooks'

export default defineComponent({
  name: 'TodoInput',
  setup() {
    const todoValue = ref<string>('');
    const { setTodo }: IUseTodo = useTodo();
    const setTodoValue = (e: KeyboardEvent ): void => {
      // 值 = todoValue.value KeyboardEvent(按下键盘)
      // console.log(e.key) // e.keyCode === 13 (弃用)
      if (e.key == 'Enter' && todoValue.value.trim().length) {
        // 设置数据
        setTodo(todoValue.value);

        todoValue.value = '';
      }
    }

    return {
      todoValue,
      setTodoValue
    }
  }
});
</script>

<style>

</style>